<template>
    <div>
        <h1>会员显示</h1>
    </div>
    会员昵称：<input type="text" v-model="info.name">
    会员年龄：<input type="text" v-model="info.min">--<input type="text" v-model="info.max">
    会员等级：<select v-model="info.id">
        <option value="">请选择</option>
        <option value="普通会员">普通会员</option>
        <option value="白银会员">白银会员</option>
        <option value="黄金会员">黄金会员</option>
        <option value="至尊会员">至尊会员</option>
    </select>
    <input type="button" value="导出" @click="dao">
    <input type="button" value="查询" @click="show">
    <table class="table">
        <tbody>
            <tr>
                <td>会员名称</td>

                <td>会员头像</td>
                <td>会员年龄</td>
                <td>会员等级</td>
                <td>会员手机号</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.userId">
                <td>{{ item.userName }}</td>

                <td><img :src="item.userImg" width="120px" height="120px"></td>
                <td>{{ item.userAge }}</td>
                <td>{{ item.userVipName }}</td>
                <td>{{ item.userPhone }}</td>
                <td>
                    <input type="button" value="修改" @click="update(item.userId)">
                </td>
            </tr>
        </tbody>
    </table>
    <span>共{{ data.totalcount }}条</span>
    <span>每页{{ info.pagesize }}条</span>
    <span>共{{ info.pageindx }}/{{ data.totalpage }}页</span>

    <input type="button" value="首页" @click="gopage(1)">
    <input type="button" value="上一页" @click="gopage(info.pageindx - 1)">
    <span v-for="item in info.pageindx">{{ item }}</span>

    <input type="button" value="下一页" @click="gopage(info.pageindx + 1)">
    <input type="button" value="尾页" @click="gopage(data.totalpage)">
    <input type="number" v-model="info.pageindx">
    <input type="button" value="跳转" @click="gopage(info.pageindx)">
    <select v-model="info.pagesize" @change="tiao">

        <option :value="item" v-for="item in arr">{{ item }}</option>
    </select>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
let arr: any = ref([2, 4, 6]);
let info: any = reactive({
    pageindx: 1,
    pagesize: 2,
    name: "",
    id: "",
    min: '',
    max: ''
})
let data: any = reactive({
    totalcount: 0,
    totalpage: 0,
    list: [],
})
onMounted(() => {
    show();
})
const show = () => {
    axios({
        url: 'https://localhost:7173/api/User/GetAdmin',
        method: 'get',
        params: info
    })
        .then(res => {
            Object.assign(data, res.data);
        })
}
const tiao = () => {
    info.pageindx = 1;
    show();
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageindx = 1;
        return;
    }
    if (num > data.totalpage) {
        info.pageindx = data.totalpage;
        return;
    }
    info.pageindx = num;
    show();
}
const dao = () => {
    location.href = "https://localhost:7173/api/User/Exor";
    return;
}
const update = (id: any) => {
    router.push({
        path: '/updateUser',
        query: { id: id }
    })
}
</script>

<style scoped></style>